<nz-modal [(nzVisible)]="visible" [nzTitle]="modalTitle" [nzContent]="modalContent" [nzFooter]="modalFooter" [nzMaskClosable]="false" [nzWidth]="600" (nzOnCancel)="hide()">
    <form #myForm="ngForm" role="form">
        <ng-template #modalTitle>
            添加产品
        </ng-template>
        <ng-template #modalContent>
            <div class="grid-auto-row" *ngIf="object">
                <nz-form-item>
                    <nz-form-label [nzSpan]="6">产品名称</nz-form-label>
                    <nz-form-control [nzSpan]="14">
                       <input nz-input name="name" type="text" [(ngModel)]="object.name" autocomplete="off" required>
                    </nz-form-control>
                </nz-form-item>
                <nz-form-item>
                    <nz-form-label [nzSpan]="6">产品大类</nz-form-label>
                    <nz-form-control [nzSpan]="14">
                        <nz-select type="text" name="type1" [(ngModel)]="object.catalog" required [compareWith]="compareElement">
                            <nz-option *ngFor="let type of customService.product.catalogs" [nzValue]="type" [nzLabel]="type.name"></nz-option>
                        </nz-select>
                    </nz-form-control>
                </nz-form-item>
                <nz-form-item>
                    <nz-form-label [nzSpan]="6">产品小类</nz-form-label>
                    <nz-form-control [nzSpan]="14">
                        <nz-select type="text" name="type2" [(ngModel)]="object.category" required [compareWith]="compareElement">
                            <nz-option *ngFor="let type of object.catalog?.children" [nzValue]="type" [nzLabel]="type.name"></nz-option>
                        </nz-select>
                    </nz-form-control>
                </nz-form-item>
                <nz-form-item>
                    <nz-form-label [nzSpan]="6">产品型号</nz-form-label>
                    <nz-form-control [nzSpan]="14">
                       <input nz-input name="model" type="text" [(ngModel)]="object.model" autocomplete="off" required>
                    </nz-form-control>
                </nz-form-item>
                <nz-form-item>
                    <nz-form-label [nzSpan]="6">货架号</nz-form-label>
                    <nz-form-control [nzSpan]="14">
                       <input nz-input name="shelf" type="text" [(ngModel)]="object.shelf" autocomplete="off" required>
                    </nz-form-control>
                </nz-form-item>
                <nz-form-item>
                    <nz-form-label [nzSpan]="6">成本价</nz-form-label>
                    <nz-form-control [nzSpan]="14">
                       <input nz-input name="cost" type="number" [(ngModel)]="object.cost" autocomplete="off" required>
                    </nz-form-control>
                </nz-form-item>
                <nz-form-item>
                    <nz-form-label [nzSpan]="6">数量</nz-form-label>
                    <nz-form-control [nzSpan]="14">
                       <input nz-input name="amount" type="number" [(ngModel)]="object.amount" autocomplete="off" required>
                    </nz-form-control>
                </nz-form-item>
                <nz-form-item>
                    <nz-form-label [nzSpan]="6">市场价</nz-form-label>
                    <nz-form-control [nzSpan]="14">
                       <input nz-input name="price" type="number" [(ngModel)]="object.price" autocomplete="off" required>
                    </nz-form-control>
                </nz-form-item>       
            </div>
        </ng-template>

        <ng-template #modalFooter>
            <button nz-button nzType="default" (click)="hide()">取消</button>
            <button nz-button nzType="primary" (click)="submit()" [disabled]="!myForm.form.valid">保存</button>
        </ng-template>
    </form>
</nz-modal>
